@import './panel-var.scss';

.cml-enter-active, .cml-leave-active {
  // 要实现切换动画请在这里实现
  // transition: all ease .2s;
}

.cml-enter, .cml-leave-to {
  // opacity: 0.3;
  // width: 0;
}
.cml-base-button {
  position: relative;

  padding: 3px 5px;
  box-sizing: border-box;
  border: 1px solid #c1fffb33;

  color: #c1fffb66;
  background-color: transparent;

  line-height: 1;
  transition: all ease .2s;
  &:hover {
    border-color: #2f6c75;

    color: $text-active-color;
  }
  &:after, &:before {
    display: block;

    position: absolute;

    width: 6px;
    height: 6px;

    background: transparent;

    content: '';
  }
  &:before {
    top: -1px;
    left: -1px;

    background-image: linear-gradient(currentColor 1px, transparent 0),
    linear-gradient(90deg, currentColor 1px, transparent 0);
    background-repeat: no-repeat;
    background-size: 6px;
  }
  &:after {
    right: -1px;
    bottom: -1px;

    background-image: linear-gradient(transparent 5px, currentColor 1px),
    linear-gradient(90deg, transparent 5px, currentColor 1px);
    background-repeat: no-repeat;
    background-size: 6px;
  }
}